
<template>
  <div>
    <h2>
      TestCanvas
    </h2>

    <img
      v-show="false"
      ref="myImg"
      src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg">

    <canvas
      ref="myCanvas"
      width="200"
      height="100"
      style="border:1px solid #c3c3c3;"
    >
      您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <button
      @click="downloadCanvas">
      下载
    </button>
  </div>
</template>

<script>
  export default {
    name: "TestCanvas" ,
    data () {
      return {

      }
    } ,
    methods: {
      alert : function () {
        alert("emem") ;
      } ,
      downloadCanvas : function () {
        // 内部函数1(可忽略细节)
        const saveFile = function(data, fileName){
          let save_link = document.createElement('a');
          save_link.href = data;
          save_link.download = fileName;

          let event = document.createEvent('MouseEvents');
          event.initEvent("click", true, false);
          save_link.dispatchEvent(event);
        };
        // 内部函数2(可忽略细节)
        const imgType = function (ty) {
          let type = ty.toLowerCase().replace(/jpg/i, 'jpeg');
          var r = type.match(/png|jpeg|bmp|gif/)[0];
          return 'image/' + r;
        } ;

        const type = 'png';   //设置下载图片的格式
        const cans = this.$refs.myCanvas ; //canvas实例子
        const img_png_src = cans.toDataURL("image/png");  //将canvas保存为图片
        const imgData = img_png_src.replace(imgType(type),'image/octet-stream');
        const filename = 'canvas' + '.' + type; //下载图片的文件名

        // shoot
        saveFile(imgData,filename);

      }
    } ,
    mounted: function () {
      console.log("挂载成功") ;
      var c=this.$refs.myCanvas ;
      var ctx=c.getContext("2d");
      // var img=this.$refs.myImg;

      var img = new Image();
      img.crossOrigin = 'Anonymous'; // 重点！设置image对象可跨域请求
      // img.src = 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg' + "?timeStamp=" + new Date().getTime(); //解决缓存引起访问失败需要添加时间戳。。。。。问题的关键点
      img.src = 'https://supimage.miniprogramhacker.cn/2020_phone_5G/hongmik30pro_1.jpg'
      alert(img.src)

      img.onload = function (){

        // 贴图
        ctx.drawImage(img,0,0);
        ctx.font="10px Arial";
        // 打水印
        ctx.fillText("Kingdee",160,90);
      }

      var img2 = new Image();
      img2.crossOrigin = 'Anonymous'; // 重点！设置image对象可跨域请求
      // img2.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596130814307&di=50335b13bf4d2ea240e388b126071260&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg' + "?timeStamp=" + new Date().getTime(); //解决缓存引起访问失败需要添加时间戳。。。。。问题的关键点
      img2.src = 'https://supimage.miniprogramhacker.cn/animal/dog/hasiqi_2.jpg'
      alert(img2.src)
      img2.onload = function (){

        // 贴图
        ctx.drawImage(img2,50,0);
        ctx.font="10px Arial";

      }



    }
  }
</script>
